import * as THREE from 'three'
import { useEffect } from 'react'
/**
 * @params lookAt 改变物体的朝向进行旋转
 * @params cube.scale() 设置物体缩放
 * @params cube.visible 设置物体隐藏/显示
 */

function APP() {
  useEffect(() => { 
    /** 创建场景 */
    const scene = new THREE.Scene();
    // 创建一个立方缓冲几何体
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    // 创建材质
    const material = new THREE.MeshLambertMaterial({ color: 0xfffff });
    // 生成带有材质的物体
    const cube = new THREE.Mesh(geometry, material);
    // cube.visible = false; // 设置物体隐藏，默认为true
    // 将物体添加到场景中
    scene.add(cube);
    // 创建灯光
    // 环境光
    const ambientLight = new THREE.AmbientLight(0x456789);
    scene.add(ambientLight);
    // 平行光，类似于太阳光
    const directionalLight = new THREE.DirectionalLight(0xabcdef, 1);
    directionalLight.position.set(100, 200, 300);
    scene.add(directionalLight);

    /** 创建相机 */
    const width = window.innerWidth; // 窗口宽度
    const height = window.innerHeight; // 窗口高度
    const k = width / height; // 窗口宽高比
    const s = 200; // 三维场景控制系数，系数越大，场景显示越大
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1, 1000); // 正交相机
    camera.position.set(0, 0, 500); // 相机位置
    camera.up.set(0, 1, 0); // 设置相机角度
    camera.lookAt(scene.position); // 设置相机方向（朝向场景方向）

    /** 图层 */
    // 创建一个图层
    const layers = new THREE.Layers();
    // 设置物体使用的图层
    cube.layers = layers;
    // 设置图层对象的制定图层
    layers.set(1);
    // 一秒后再设置图层对象的制定图层
    setTimeout(() => { layers.set(0), 2000 });

    /** 创建渲染器 */
    const renderer = new THREE.WebGLRenderer(
      {
        antialias: true, // 开启抗锯齿
      }
    ); // 创建渲染器
    renderer.setSize(width, height); // 设置渲染区域尺寸
    renderer.setClearColor(0x333333, 1); // 设置背景颜色
    document.body.appendChild(renderer.domElement); // body元素插入到canvas对象
    
    function render() {
      renderer.render(scene, camera); // 执行渲染
    }
    // 相机的初始位置
    let x = 0;
    let z = 0;
    const r = 400;
    // 物体旋转的角度
    let angle = 0;
    // 设置一个单位向量，该向量是正y轴方向
    const axis = new THREE.Vector3(0, 1, 0);
    function animation() {
      requestAnimationFrame(() => {
        angle--;
        const cameraX = x + r * Math.cos(angle * Math.PI / 180);
        const cameraZ = z + r * Math.sin(angle * Math.PI / 180);
        // 计算xz平面上以原点为中心，半径200的圆上每个角度的坐标，物体看向该坐标
        cube.lookAt(cameraX, 0, cameraZ);
        render();
        animation();
      })
    }
    animation();
  }, [])
  return (
    <div className='APP'></div>
  )
}

export default APP